<template>
  <div :style="{ zoom: zoom }">
    <!-- 时间轴本体 -->
    <ul class="timeline-wrapper" @scroll="scrollEvent">
      <!-- 默认起点 -->
      <li class="timeline-item" :key="0">
        <div class="timeline-box">
          <a-popover
            trigger="hover"
            content="开始"
          >
            <div class="out-circle">
              <div class="timeline-date">
                <a-icon type="play-circle" theme="filled" :style="{ fontSize: '20px', color: '#71CA19' }"/>
                <br/>
                <span>
                  开始
                </span>
              </div>
            </div>
          </a-popover>
          <div
            class="long-line"
            style="width:100px"
          ></div>
        </div>
      </li>
      <!-- 动态生成 -->
      <li class="timeline-item" v-for="item in timelineList" :key="item.id">
        <div class="timeline-box">
          <a-popover
            trigger="hover"
            :content="item.content"
          >
            <div class="out-circle">
              <div class="timeline-date">
                <a-icon
                  v-if="item.status !== 2"
                  :type="item.status === 3 ? 'check-circle' : 'clock-circle'"
                  theme="twoTone"
                  :two-tone-color="item.status === 3 ? '#52c41a' : '#F6BC00'"
                  :style="{ fontSize: '20px' }"
                />
                <a-icon v-if="item.status === 2" type="setting" spin :style="{ fontSize: '20px', color: '#3B91FF' }"/>
                <br/>
                <span>
                  {{ item.date }}
                </span>
              </div>
            </div>
          </a-popover>
          <div
            class="long-line"
            v-show="item.isShow"
            :style="`width:${
              item.children.length > 0 ? (item.children.length + 1) * 100 : 1 * 100
            }px`"
          >
            <div
              v-for="(subItem, index) in item.children"
              :key="subItem.id"
              class="sub-item-box"
            >
              <!-- 时间轴上方元素，奇数 -->
              <div class="top-children-item" v-if="index % 2 == 0">
                <div
                  class="sub-line-box"
                  v-show="subItem.content"
                >
                  <div
                    class="children-box"
                    :id="subItem.id"
                    @click="childrenClick($event)"
                  >
                    <div
                      :class="`children-box-title ${
                        subItem.status === 3 ? 'color-done' : subItem.status === 2 ? 'color-run' : 'color-wait'
                      }`"
                    >
                      {{ subItem.name + "：" + subItem.num }}天
                    </div>
                    <div class="children-box-body">
                      {{ subItem.content }}
                    </div>
                  </div>
                  <div
                    class="children-line-box"
                  ></div>
                </div>
                <div class="sub-item-manipur">
                  <a-icon class="sub-item-icon-top" v-if="subItem.status === 2" type="setting" spin :style="{ fontSize: '10px', color: '#3B91FF' }"/>
                  <div
                    v-if="subItem.status !== 2"
                    :class="`sub-item-point ${
                      subItem.status === 3 ? 'color-done' : subItem.status === 2 ? 'color-run' : 'color-wait'
                    }`"
                  ></div>
                </div>
                <span class="sub-item-text">
                  {{ subItem.date }}
                </span>
              </div>
              <!-- 时间轴下方元素，偶数 -->
              <div class="bottom-children-item" v-if="index % 2 == 1">
                <span class="sub-item-text">
                  {{ subItem.date }}
                </span>
                <div class="sub-item-manipur">
                  <a-icon class="sub-item-icon-bottom" v-if="subItem.status === 2" type="setting" spin :style="{ fontSize: '10px', color: '#3B91FF' }"/>
                  <div
                    v-if="subItem.status !== 2"
                    :class="`sub-item-point ${
                      subItem.status === 3 ? 'color-done' : subItem.status === 2 ? 'color-run' : 'color-wait'
                    }`"
                  ></div>
                </div>
                <div
                  class="sub-line-box"
                  v-show="subItem.content"
                >
                  <div
                    class="children-line-box"
                  ></div>
                  <div
                    class="children-box"
                    :id="subItem.id"
                    @click="childrenClick($event)"
                  >
                    <div
                      :class="`children-box-title ${
                        subItem.status === 3 ? 'color-done' : subItem.status === 2 ? 'color-run' : 'color-wait'
                      }`"
                    >
                      {{ subItem.name + "：" + subItem.num }}天
                    </div>
                    <div class="children-box-body">
                      {{ subItem.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <!-- 默认终点 -->
      <li class="timeline-item" :key="100">
        <div class="timeline-box">
          <a-popover
            trigger="hover"
            content="结束"
          >
            <div class="out-circle">
              <div class="timeline-date">
                <a-icon type="check-circle" theme="filled" :style="{ fontSize: '20px', color: '#71CA19' }"/>
                <br/>
                <span>
                  结束
                </span>
              </div>
            </div>
          </a-popover>
        </div>
      </li>
    </ul>
    <!-- 模态框，弹出详情 -->
    <a-modal v-model="visible" title="节点详情">
      {{ nodeId }}
      <template slot="footer">
        <a-button size="small" key="submit" @click="()=>{this.visible = false}">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script type="text/babel">
  export default {
    name: 'TimeLine',
    props: {
      timelineList: {
        type: Array,
        default: () => {
          return []
        }
      },
      zoom: {
        type: String,
        default: () => {
          return '100%'
        }
      }
    },
    data() {
      return {
        visible: false,
        nodeId: ''
      }
    },
    mounted() {},
    methods: {
      scrollEvent(e) {
        this.$emit('scrollEvent', e)
      },
      // 子元素点击事件
      childrenClick (e) {
        this.nodeId = e.currentTarget.id
        this.visible = true
      }
    }
  }
</script>

<style scoped lang="less">
  * {
    /* 滚动轴样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background: #E1E9F0;
    }
  }

  ul.timeline-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
    padding: 100px 40px;
    white-space: nowrap;
    overflow-x: scroll;
    .color-done {
      background-color: #71CA19;
    }
    .color-run {
      background-color: #3B91FF;
    }
    .color-wait {
      background-color: #F6BC00;
    }
  }

  /* 时间线 */
  .timeline-item {
    position: relative;
    display: inline-block;
    .timeline-box {
      text-align: center;
      display: flex;
      align-items: center;
      .out-circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content:center;
        cursor: pointer;
        .timeline-date {
          margin-top: 20px;
          font-weight: 900;
          font-size: 12px;
        }
      }

      .long-line {
        height: 2px;
        background: rgba(14, 116, 218, 0.2);
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: revert;
        justify-content: space-around;
        .sub-item-box {
          margin-top: -20px;
          position: relative;
          .top-children-item {
            margin-top: -82px;
          }
          .bottom-children-item {
            margin-top: -2px;
          }
          .sub-item-text {
            font-size: 5px;
            font-weight: bold;
          }
          .sub-item-manipur {
            display:flex;
            align-items: center;
            justify-content:center;
          }
          .sub-item-point {
            height: 5px;
            width: 5px;
            border-radius: 50%;
          }
          .sub-item-icon-top {
            margin-top: -2px;
          }
          .sub-item-icon-bottom {
            margin-top: -3px;
          }
          .sub-line-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100px;
            .children-line-box {
              width: 0px;
              height: 100px;
              border-left: 1px solid rgba(14, 116, 218, 0.3);
            }
            .children-box {
              flex-wrap: wrap;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid rgba(14, 116, 218, 0.3);
              white-space: break-spaces;
              text-align: center;
              min-width: 120px;
              cursor: pointer;
              .children-box-title {
                width: 100%;
                color: white;
              }
              .children-box-body {
                width: 100%;
                padding: 5px;
                min-height: 30px;
                font-size: 12px;
              }
            }
          }
        }
      }
    }

    .timeline-content {
      box-sizing: border-box;
      margin-left: 20px;
      height: 106px;
      padding: 0 0 0 20px;
      text-align: left;
      margin-bottom: 30px;

      .timeline-title {
        font-size: 14px;
        word-break: break-all;
        margin-bottom: 16px;
        color: #333;
        font-weight: 500;
      }
      .timeline-desc {
        font-size: 14px;
        color: #999999;
      }
    }
  }

  .timeline-item:last-of-type .timeline-content {
    margin-bottom: 0;
  }
</style>
